<template>
  <div v-for="item in data" @click.stop="selectA(item)" class="tree">
    <label><input type="checkbox" v-model="item.checked"> {{ item.name }}</label>
    <Tree v-if="item?.children?.length" :data="item.children" />
  </div>
</template>

<script lang="ts">
// 组件命名
  // export default {
  //   name: 'Tree'
  // }
</script>

<script setup lang='ts'>
import { ref, reactive, watchEffect, watch } from 'vue'

// 使用插件，增加自定义宏
defineOptions({
  name: 'Tree'
})

interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
}
const props = defineProps<{
  data?: Tree[]
}>()
const selectA = (item: Tree) => {
  console.log(item)
}

</script>

<style lang='scss' scoped>
.tree {
  margin-left: 20px;
  margin-top: 10px;
}
</style>